<template>
  <div class="p-16px">
    <el-card>
      <el-space :size="24">
        <div class="flex items-center whitespace-nowrap">
          设备编号：
          <el-input v-model="params.deviceCode" placeholder="请输入设备编号" />
        </div>
        <div class="flex items-center">
          时间：
          <el-date-picker
            type="datetimerange"
            v-model="operateTime"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            :default-time="[
              new Date(2000, 1, 1, 0, 0, 0),
              new Date(2000, 1, 1, 23, 59, 59),
            ]"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
          />
        </div>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-space>
    </el-card>
    <el-card class="mt-16px">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="messageType" label="消息类型" width="180" />
        <el-table-column prop="deviceCode" label="设备编号" />
        <el-table-column prop="createTime" label="通知时间" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <div class="mt-16px flex justify-end">
        <el-pagination
          v-model:currentPage="params.current"
          v-model:page-size="params.size"
          layout="prev, pager, next"
          background
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import dayjs from "dayjs";
import { useCommonStoreHook } from "@/store/modules/common";
const commonStore = useCommonStoreHook();
const operateTime = ref([]);
const params = ref({
  deviceCode: "",
  operateTimeSt: "",
  operateTimeEd: "",
  current: 1,
  size: 10,
});
const shortcuts = [
  {
    text: "最近一周",
    value: [
      dayjs().subtract(7, "day").format("YYYY-MM-DD 00:00:00"),
      dayjs().format("YYYY-MM-DD 23:59:59"),
    ],
  },
  {
    text: "最近一个月",
    value: [
      dayjs().subtract(1, "M").format("YYYY-MM-DD 00:00:00"),
      dayjs().format("YYYY-MM-DD 23:59:59"),
    ],
  },
  {
    text: "最近三个月",
    value: [
      dayjs().subtract(3, "M").format("YYYY-MM-DD 00:00:00"),
      dayjs().format("YYYY-MM-DD 23:59:59"),
    ],
  },
];
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const fetchList = () => {
  loading.value = true;
  if (operateTime.value) {
    params.value.operateTimeSt = operateTime.value[0];
    params.value.operateTimeEd = operateTime.value[1];
  } else {
    params.value.operateTimeSt = "";
    params.value.operateTimeEd = "";
  }
  commonStore
    .queryDeviceGoodsOperateRecordPage(params.value)
    .then((res) => {
      tableData.value = res.data.records;
      total.value = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const handleSearch = () => {
  params.value.current = 1;
  fetchList();
};
const handleDetail = (row) => {
  console.log(row);
};
const handleCurrentChange = (current) => {
  params.value.current = current;
  fetchList();
};
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped></style>
